<template>
  
  <div class="home">
    <el-button type="success" @click='addButton()'>新增文章</el-button>
      <el-table
      :data="tableData"
      style="width: 100%" id='t'>
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="publishTime"
        label="发布时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot='scope'>
          <el-button type="primary" @click='toDetail(scope.row)'>详情</el-button>
          <el-button type="info" @click='deleteById(scope.row)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- model -->
    <el-dialog title="添加新的文章" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="标题"  >
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" >
        <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.categoryId" placeholder="请选择类型">
            <el-option :label="item.name" :value="item.id" v-for='item in category' :key='item.id'>{{item.name}}</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNewArticle()">添 加</el-button>
      </div>
    </el-dialog>
 
  </div>
</template>

<script>
// 导入axios
import axios from '@/http/axios'
export default {
  data(){
    return {
      tableData:[],
      form:{},
      category:[],
      dialogFormVisible:false,
    }
  },
  created(){
    this.login()
    this.findAllNews()
  },
  methods:{
    // 查看详情
    toDetail(item){
      // 跳转到详情页面
      // console.log(item.id)
      this.$router.push({
        path:'about',
        query:{id:item.id}
      })
      // this.$router.push({
      //   name:'About',
      //   params:{id:item.id}
      // })
    },
    // 登录
    login(){
      axios.post('http://121.199.29.84:8001/user/login',{
        username:'admin',
        password:'123321'
      }).then((res)=>{
        // 将token储存到浏览器
        localStorage.setItem('token',res.data.data.token)
      })
    },
    // 查询所有的新闻
    findAllNews(){
      axios.get('http://121.199.29.84:8001/article/findAll').then((res)=>{
        this.tableData = res.data.data
      })
    },
    deleteById(item){
      let obj={
          id:item.id
      }
      axios({
        url:'http://121.199.29.84:8001/article/deleteById',
        method:'get',
        params:obj}).then((res)=>{

            console.log(res)
            this.findAllNews()
      })
    },
    addButton(){

        this.dialogFormVisible=true
        this.findAllCategory()
    },
    findAllCategory(){
        axios.get('http://121.199.29.84:8001/category/findAll').then((res)=>{
          console.log(res)
            this.category = res.data.data
        })
                    
     },
     addNewArticle(){ 

      axios({
        url:'http://121.199.29.84:8001/article/saveOrUpdate',
        method:'post',
        params:this.form
      }).then((res)=>{
        console.log(res)
          this.dialogFormVisible = false
          this.findAllNews()
      })
      //  axios.post('http://121.199.29.84:8001/article/saveOrUpdate',{data:this.form}).then((res)=>{
      //     console.log(res)
      //     this.dialogFormVisible = false
      //     this.findAllNews()
          
      //  })
     }
  }
}
</script>
